<!-- 综合运营看板 -->
<template>
  <div class="mes-container">
    <div class="containerBox">
      <canvas id="canvas" style="position: absolute;top: 0;left: 0;"></canvas>
      <!-- 头部 -->
      <all-title ref="allTitle" :comp-info="compInfo" :title-name="titleName" />
      <div class="contentBox">
        <div class="leftBox fl">
          <div class="boxTop allLeftStyleTop allMargin">
            <h1>物料采购追踪</h1>
            <left-content ref="leftContent" />
          </div>
          <div class="boxBottom allLeftStyleBottom allMargin">
            <h1>
              <span>QA质量控制</span>
            </h1>
            <left-echarts-pie ref="leftEchartsPie" />
          </div>
        </div>
        <div class="centerBox fl">
          <div class="boxTop allCenterStyleTop allMargin">
            <div class="centerTopBoxTop">
              <ul>
                <li>
                  <div class="liDiv">
                    <i class="iconfont icon syan icon-wancheng"></i>
                    <span class="all syan">已完成订单</span>
                    <b class="all">{{orderObj.finishNum}}</b>
                    <em class="all">
                      <el-progress :text-inside="true" :show-text="false" color="#09e2f8" :stroke-width="20" :percentage="70"></el-progress>
                    </em>
                  </div>
                </li>
                <li>
                  <div class="liDiv">
                    <i class="iconfont icon yellow icon-zaizhidingdan"></i>
                    <span class="all yellow">在制订单</span>
                    <b class="all">{{orderObj.workNum}}</b>
                    <em class="all">
                      <el-progress :text-inside="true" :show-text="false" color="#ec7c22" :stroke-width="20" :percentage="70"></el-progress>
                    </em>
                  </div>
                </li>
                <li>
                  <div class="liDiv">
                    <i class="iconfont icon red icon-yanqi"></i>
                    <span class="all red">延期订单</span>
                    <b class="all">{{orderObj.delayNum}}</b>
                    <em class="all">
                      <el-progress :text-inside="true" :show-text="false" color="#ec1f4f" :stroke-width="20" :percentage="70"></el-progress>
                    </em>
                  </div>
                </li>
              </ul>
            </div>
            <div class="centerTopBoxBottom">
              <center-echarts-line ref="centerEchartsLine" />
            </div>
          </div>
          <div class="boxBottom allCenterStyleBottom allMargin">
            <h1>
              <span>设备维保任务</span>
            </h1>
            <center-bottom-tab ref="centerBottomTab" :center-bottom-tab="centerBottomTab" />
          </div>
        </div>
        <div class="rightBox fl">
          <div class="boxTop allRightStyleTop allMargin">
            <right-top-info ref="rightTopInfo" :eq-obj="eqObj" />
            <right-echarts-gauge ref="rightEchartsGauge" />
          </div>
          <div class="boxBottom allRightStyleBottom allMargin">
            <h1>
              <span>工艺巡查</span>
            </h1>
            <right-echarts-line ref="rightEchartsLine" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { bgFun } from '../../../bg.js'
import { mapGetters } from 'vuex'
import allTitle from '../components/allTitle'
import leftContent from './components/leftContent'
import leftEchartsPie from './components/leftEchartsPie'
import rightEchartsLine from './components/rightEchartsLine'
import centerBottomTab from './components/centerBottomTab'
import centerEchartsLine from './components/centerEchartsLine'
import rightTopInfo from './components/rightTopInfo'
import rightEchartsGauge from './components/rightEchartsGauge'
export default {
  name: 'EqMaintenance',
  components: {
    allTitle,
    leftContent,
    leftEchartsPie,
    rightEchartsLine,
    centerBottomTab,
    centerEchartsLine,
    rightEchartsGauge,
    rightTopInfo
  },
  data() {
    return {
      titleName: '综合运营看板',
      centerBottomTab: [],
      obj: {},
      eqObj: {},
      orderObj: {}
    }
  },
  computed: {
    ...mapGetters(['compInfo'])
  },
  created() {},
  async mounted() {
    const loading = this.$loading({
      lock: true,
      text: '数据加载中...', // 数据加载中...
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    setTimeout(async () => {
      loading.close()
      bgFun()
    }, 500)
    this.getInfo()
    /* 根据浏览器收缩echarts重铸 */
    window.onresize = () => {
      if (this.$refs['leftEchartsPie'].myChart)
        this.$refs['leftEchartsPie'].infoSize()
      if (this.$refs['rightEchartsLine'].myChart)
        this.$refs['rightEchartsLine'].infoSize()
      if (this.$refs['centerEchartsLine'].myChart)
        this.$refs['centerEchartsLine'].infoSize()
      if (this.$refs['rightEchartsGauge'].myChart)
        this.$refs['rightEchartsGauge'].infoSize()
    }
  },
  beforeDestroy() {},
  methods: {
    getInfo() {
      const loading = this.$loading({
        lock: true,
        text: '数据加载中...', // 数据加载中...
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      setTimeout(async () => {
        loading.close()
        await this.$refs['leftEchartsPie'].getQaStatistics()
        await this.$refs['rightEchartsLine'].getEouteSearch()
        await this.getEquipRepair()
        await this.getEquipWorkStatus()
        await this.getOrderStatistics()
        await this.$refs['leftContent'].getPurchaseTrack()
        await this.$refs['centerEchartsLine'].getWorkStat()
      }, 1000)
    },

    /* 获取设备维保任务 */
    async getEquipRepair() {
      const res = await this.$axios.get('/board/operations/equipRepair')
      if (res?.data.code === 200) {
        this.centerBottomTab = res.data.data.slice(0, 6)
      }
    },

    /* 获取设备运行状态 */
    async getEquipWorkStatus() {
      const res = await this.$axios.get('/board/operations/equipWorkStatus')
      if (res?.data.code === 200) {
        this.eqObj = res.data.data
        this.$refs['rightEchartsGauge'].getInfo(res.data.data)
      }
    },
    /* 获取订单统计 */
    async getOrderStatistics() {
      const res = await this.$axios.get('/board/operations/orderStatistics')
      if (res?.data.code === 200) {
        this.orderObj = res.data.data
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.mes-container {
  position: fixed;
  z-index: 999999 !important;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  // background: radial-gradient(hwb(221 0% 34%) 20%, #001439 70%);
  background: url(../../../assets/images/kb01/kbbg01.jpg) no-repeat;
  background-size: 100% 100%;
  min-width: 1200px;
  min-height: 675px;
  .containerBox {
    position: relative;
    height: 100%;
    /* 中间样式 */
    .contentBox {
      position: absolute;
      top: 70px;
      height: calc(100% - 70px);
      width: 100%;
      overflow: hidden;
      /* 五个框底 */
      .allLeftStyleTop {
        background: url(../../../assets/images/yykb/kuan.png) no-repeat;
        background-size: 100% 100%;
        h1 {
          font-size: 20px;
          color: #fff;
          text-align: right;
          height: 60px;
          line-height: 40px;
          padding: 25px 50px 0 0;
          margin: 0;
        }
      }
      /* 左下角饼图 */
      .allLeftStyleBottom {
        background: url(../../../assets/images/yykb/kuan3.png) no-repeat;
        background-size: 100% 100%;
        h1 {
          font-size: 20px;
          color: #fff;
          margin: 0;
          position: relative;
          height: 30px;
          span {
            width: 100%;
            height: 100%;
            display: block;
            text-align: center;
            position: absolute;
            top: -15px;
            left: 0;
            padding-left: 30px;
          }
        }
      }
      .allRightStyleTop {
        background: url(../../../assets/images/yykb/kuan2.png) no-repeat;
        background-size: 100% 100%;
      }
      /* 右下角折线图 */
      .allRightStyleBottom {
        background: url(../../../assets/images/yykb/kuan4.png) no-repeat;
        background-size: 100% 100%;
        h1 {
          font-size: 20px;
          color: #fff;
          margin: 0;
          position: relative;
          height: 20px;
          span {
            width: 100%;
            height: 100%;
            display: block;
            text-align: center;
            position: absolute;
            top: -15px;
            left: 0;
            padding-left: 30px;
          }
        }
      }
      /* 底部表格 */
      .allCenterStyleBottom {
        background: url(../../../assets/images/yykb/kuan5.png) no-repeat;
        background-size: 100% 100%;
        h1 {
          font-size: 20px;
          color: #fff;
          margin: 0;
          position: relative;
          height: 20px;
          span {
            width: 100%;
            height: 100%;
            display: block;
            text-align: center;
            position: absolute;
            top: -19px;
            left: 0;
            padding-left: 30px;
          }
        }
      }
      .allMargin {
        margin: 20px;
      }
      .boxTop {
        width: calc(100% - 40px);
        height: calc(65% - 40px);
      }
      .boxBottom {
        width: calc(100% - 40px);
        height: calc(35% - 40px);
      }
      .leftBox {
        width: 27%;
        height: 100%;
      }
      .centerBox {
        width: 46%;
        height: 100%;
        .centerTopBoxTop {
          height: calc(35% - 7.5px);
          width: 100%;
          margin-bottom: 7.5px;
          ul {
            height: 100%;
            overflow: hidden;
            li {
              width: calc(33.3333% - 30px);
              margin: 15px;
              float: left;
              border: 1px solid rgba(10, 72, 113, 1);
              border-radius: 5px;
              background: rgba(33, 49, 87, 0.4);
              height: calc(100% - 30px);
              overflow: hidden;
              .liDiv {
                padding: 10px 10px 0 10px;
                height: 100%;
                position: relative;
              }
              i {
                position: absolute;
                left: 20px;
                top: 8px;
                font-size: 50px;
              }
              .all {
                height: 33.3333%;
                width: 100%;
                display: block;
              }
              .syan {
                color: #09e2f8;
              }
              .yellow {
                color: #ec7c22;
              }
              .red {
                color: #ec1f4f;
              }
              span {
                font-size: 18px;
                text-align: right;
                font-weight: bold;
              }
              b {
                font-size: 26px;
                text-align: right;
                color: #fff;
              }
              em {
                // display: flex;
                // justify-content: center;
                // align-items: center;
                // height: 33.3333%;
              }
            }
          }
        }
        /* 中间折线echarts */
        .centerTopBoxBottom {
          height: calc(65% - 7.5px);
          width: 100%;
          margin-top: 7.5px;
          border: 1px solid rgba(13, 66, 125, 1);
          border-radius: 5px;
          background: rgba(33, 49, 87, 0.4);
        }
      }
      .rightBox {
        width: 27%;
        height: 100%;
      }
    }
  }
}
</style>
